<template>
  <div class="order-pay-page flex flex-col mx-auto max-w-7xl">
    <div class="box-center grid grid-cols-5 !w-full">
      <div class="left col-span-3 !w-auto">
        <div class="mode lg:!px-0">
          <div class="title flexbox flex-align-center">
            <h1 class="text">{{ $t('orderPage.payTitle') }}</h1>
          </div>
        </div>
        <div class="goods lg:!px-0">
          <div class="title capitalize">{{ $t('orderPage.goodsInfo') }}</div>
          <div class="list">
            <div class="goods-row row-header flexbox flex-align-center flex-justify-between">
              <div class="item-col base-col flexbox flex-align-center">
                {{ $t('formItem.productName') }}
              </div>
              <div class="lex-1 flexbox flex-align-center">
                <template v-if="type == 1">
                  <div class="item-col price-col line-clamp-1">
                    {{ $t('formItem.productPrice') }}
                  </div>
                  <div class="item-col num-col">
                    {{ $t('formItem.productTotal') }}
                  </div>
                </template>
                <template v-else>
                  <div class="item-col price-col line-clamp-1" v-for="(i, k) in result" :key="k">
                    {{ i.field }}
                  </div>
                  <div class="item-col num-col line-clamp-1">
                    {{ $t('formItem.productTotal') }}
                  </div>
                </template>
              </div>
            </div>
            <!--  -->
            <!--  -->
            <!--  -->
            <div class="goods-row row-body flexbox flex-align-center flex-justify-between" v-for="item in order_goods" :key="item.order_no">
              <nuxt-link class="item-col base-col flexbox flex-align-center" :to="localePath(`/product/${item.goods_info.code}`)">
                <div class="img overflow-hidden flex-none border">
                  <img
                    loading="lazy"
                    class="size-full object-cover flex-none"
                    v-lazy="$globalFn.imgPrefixUrl(item.image, 'goods_thumb_1_1')"
                    alt="Order product thumbnail"
                    title="Product preview in order"
                  />
                </div>
                <div class="info">
                  <div class="name flex gap-2 items-center">
                    <span class="line-clamp-1"> {{ item.goods_name }} </span>
                    <img
                      src="https://cd.sealmg.com/assets/img/discountLabel.png"
                      class="size-4"
                      alt="Discount badge"
                      title="Product discount indicator"
                      v-if="item.max_discount > 0"
                    />
                  </div>
                  <span class="line-clamp-1 text-[12px] text-[#666666]">{{ item.sku_name }}</span>
                </div>
              </nuxt-link>
              <template v-if="type == 1">
                <div class="flexbox flex-align-center">
                  <div class="item-col price-col">
                    <div class="price">{{ item.currency_symbol }}{{ item.unit_price || 0 }}</div>
                    <div class="num" v-if="item.total_num">x{{ item.total_num || 0 }}</div>
                  </div>
                  <div class="item-col total-col">
                    {{ item.currency_symbol }}
                    {{ Number(item.payable_price).toFixed(2) || 0 }}
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="flexbox flex-align-center">
                  <div class="item-col total-col line-clamp-1 overflow-hidden !text-black" v-for="(i, k) in result" :key="k">
                    <div class="line-clamp-1 w-full">
                      {{ functions(i) }}
                    </div>
                  </div>
                  <div class="item-col total-col line-clamp-1">
                    {{ item.currency_symbol }}
                    {{ Number(item.payable_price).toFixed(2) || 0 }}
                  </div>
                </div>
              </template>
              <!-- {{ order_goods[0].goods_info?.user_ext }} -->
              <!-- {{ order_goods[0].goods_info?.ext }} -->
            </div>
          </div>
          <div class="cards">
            <div class="cards-item rounded-[0px_0px 12px 12px] overflow-hidden">
              <div class="top flexbox flex-align-center">
                <span class="text">{{ $t('orderPage.goodsInfo') }}</span>
              </div>
              <nuxt-link
                :to="localePath(`/product/${item.goods_info.code}`)"
                v-for="(item, k) in order_goods"
                :key="k"
                class="goods-info !shadow-none flexbox flex-align-center flex-justify-between"
              >
                <div class="goods-left flexbox flex-align-center flex-none max-lg:w-[80%]">
                  <img
                    loading="lazy"
                    class="img flex-none"
                    v-lazy="$globalFn.imgPrefixUrl(item.image, 'goods_thumb_1_1')"
                    alt="Mobile order thumbnail"
                    title="Mobile product preview"
                  />
                  <div class="flex flex-col">
                    <span class="line-clamp-1 text-[14px] text-[#262626] font-medium">{{ item.goods_name }}</span>
                    <span class="line-clamp-1 text-[12px] text-[#666666]">{{ item.sku_name }}</span>
                  </div>
                </div>
                <div class="goods-right flex-none">
                  <div class="total flex !flex-col items-end">
                    <span class="num !text-right line-clamp-1 !text-[#ff4e33]">{{ item.currency_symbol }}{{ item.unit_price || 0 }}</span>
                    <span class="num !text-right">x{{ item.total_num || 0 }}</span>
                  </div>
                </div>
              </nuxt-link>
              <!-- <template v-if="type == 1">
                <div class="ddd px-[12px] py-0 flex justify-between pb-4">
                  <div class="flex flex-col gap-2">
                    <span class="font-medium text-[12px] text-[#999999]">
                      {{ $t("formItem.productPrice") }}
                    </span>
                    <span class="font-medium text-[12px] text-[#999999]">
                      {{ $t("formItem.currency_symbol") }}
                    </span>
                  </div>
                  <div class="flex flex-col gap-2">
                    <span class="font-medium text-[12px] text-[#999999]">
                      {{ item.currency_symbol }}
                    </span>
                    <span class="font-medium text-[12px] text-[#999999]">
                      {{ item.currency_symbol }}
                      {{ Number(item.payable_price).toFixed(2) || 0 }}
                    </span>
                  </div>
                </div>
              </template> -->
              <template v-if="type == 2">
                <!-- <div class="goods-info flex gap-2 !h-[30px] justify-between">
                  <span class="font-medium text-[12px] text-[#999999]">
                    {{ $t("formItem.productPrice") }}
                  </span>
                  <span class="font-medium text-[12px] text-[#999999]">
                    {{ item.currency_symbol }}
                  </span>
                </div>
                <div class="goods-info flex gap-2 !h-[30px] justify-between">
                  <span class="font-medium text-[12px] text-[#999999]">
                    {{ $t("formItem.productTotal") }}
                  </span>
                  <span class="font-medium text-[12px] text-[#999999]">
                    {{ item.currency_symbol }}
                    {{ Number(item.payable_price).toFixed(2) || 0 }}
                  </span>
                </div> -->
                <!-- <div
                  class="goods-info flex justify-between !box-border !rounded-none"
                >
                  </div> 
                </div>-->
                <div class="ddd px-[12px] py-0 flex justify-between pb-4">
                  <div class="flex flex-col gap-2">
                    <div v-for="(i, k) in result" :key="k" class="">
                      <span class="font-medium text-[12px] text-[#999999]">
                        {{ i.field }}
                      </span>
                    </div>
                  </div>
                  <div class="flex flex-col gap-2">
                    <div v-for="(i, k) in result" :key="k" class="flex justify-end text-right">
                      <span class="font-medium text-[12px] text-[#999999]">
                        {{ functions(i) }}
                      </span>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="right col-span-2 !w-auto sticky top-[6rem] h-fit">
        <div class="mode !px-0">
          <div class="title flexbox flex-align-center">
            <h2 class="text">{{ $t('orderPage.payInfo') }}</h2>
          </div>
          <div class="content pay">
            <!-- 数量 -->
            <!-- 数量 -->
            <!-- 数量 -->
            <div class="pay-item flexbox flex-align-center flex-justify-between">
              <span class="label">{{ $t('formItem.productNum') }}</span>
              <span class="cont">{{ total_num || 0 }}</span>
            </div>
            <!-- 总计 -->
            <!-- 总计 -->
            <!-- 总计 -->
            <div class="pay-item flexbox flex-align-center flex-justify-between">
              <span class="label">{{ $t('formItem.total1') }}</span>
              <span class="cont">
                {{ data.currency_symbol }}
                {{ Number(data.payable_price).toFixed(2) || 0 }}</span
              >
            </div>
            <!-- 服务费 -->
            <!-- 服务费 -->
            <!-- 服务费 -->
            <!-- <div class="pay-item pay-service flexbox flex-justify-between">
              <div class="service flexbox flex-justify-between w-full">
                <span class="lable">{{ $t('orderPage.serviceCharge') }}</span>
                <div class="cont">
                  <div class="price">3333</div>
                  <div class="rate">3333</div>
                </div>
              </div>
            </div> -->

            <div class="handle flexbox flex-align-center flex-justify-between">
              <span class="price">
                {{ data.currency_symbol }}
                {{ Number(data.payable_price).toFixed(2) || 0 }}
              </span>
              <!-- 继续支付 -->
              <el-button class="theme-btn" @click="createOrder">{{ $t('pages.settlement') }}</el-button>
            </div>
            <!-- <div class="pay-notice">
              <span class="text">{{ $t("orderPage.payNOtice") }}</span>
              <nuxt-link class="text red hover:underline">
                {{ $t("orderPage.saleProtocol") }},
             </nuxt-link>
              <nuxt-link class="text red hover:underline">
                {{ $t("orderPage.useProtocol") }},
             </nuxt-link>
              <nuxt-link class="text red hover:underline">
                {{ $t("orderPage.privacyProtocol") }}.
             </nuxt-link>
            </div> -->
            <div class="pay-notice"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-[60px]"></div>
    <div class="bottom-box !w-full !h-auto !pb-2 flex items-center">
      <div class="handle flexbox flex-align-center flex-justify-between">
        <span class="price">
          {{ data.currency_symbol }}
          {{ Number(data.payable_price).toFixed(2) || 0 }}
        </span>
        <!-- 继续支付 -->
        <el-button class="theme-btn" @click="createOrder">{{ $t('pages.settlement') }}</el-button>
      </div>
      <!-- <div class="pay-notice">
        <span class="text">{{ $t("orderPage.payNOtice") }}</span>
        <nuxt-link class="text red" :to="localePath('/article/sales-terms')">
          {{ $t("orderPage.saleProtocol") }}、
       </nuxt-link>
        <nuxt-link class="text red" :to="localePath('/article/terms-of-use')">
          {{ $t("orderPage.useProtocol") }}、
       </nuxt-link>
        <nuxt-link class="text red" :to="localePath('/article/privacy-policy')">
          {{ $t("orderPage.privacyProtocol") }}
       </nuxt-link>
      </div> -->
    </div>
  </div>
</template>
<script>
  export default {
    layout: 'newsHome',
    name: 'orderPay',
    key(route) {
      return route.fullPath
    },
    head() {
      return {
        title: `Checkout - SEALMG`,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content:
              'Complete your purchase securely on SEALMG. Review your order details and choose from our trusted payment methods for a smooth checkout experience.'
          }
        ]
      }
    },
    data: function () {
      return {
        order_goods: [],
        data: {},
        type: {},
        query: [],
        total_num: 0,
        goods: null,
        result: []
      }
    },
    created() {
      if (this.order_goods[0].goods_info?.ext) {
      }
    },
    async asyncData({ app, query }) {
      let res = await app.$axios.post(`/api/order/checkout`, {
        goods: JSON.parse(query.data)
      })
      const result = res.order_goods[0].goods_info?.ext.map(item => ({
        ...item,
        value: res.order_goods[0].goods_info?.user_ext[item.field]
      }))
      return {
        order_goods: res.order_goods,
        data: res,
        result: result,
        goods: query.data,
        type: query.type,
        query: JSON.parse(query.data),
        // total_num: res.order_goods.reduce((sum, item) => {
        //   return sum + (Number(item.total_num) || 0);
        // }, 0),
        total_num: res.order_goods.length
      }
    },
    beforeDestroy() {},
    methods: {
      functions(e) {
        if (e.type === 'select' && e.options && e.value) {
          const optionsArray = e.options.split('|').map(opt => {
            const [label, value] = opt.split(':')
            return { label, value }
          })

          const selectedOption = optionsArray.find(opt => opt.value === e.value)

          return selectedOption ? selectedOption.label : e.value
        }

        // 非select类型直接返回value
        return e.value
      },
      deleteShoppingCart() {
        let ids = []
        JSON.parse(this.goods).map(item => {
          ids.push(item.id)
        })
        this.$axios.post('/api/cart/del', { gid: ids.join(',') })
      },
      createOrder() {
        this.$axios
          .post('/api/order/create', { goods: this.query })
          .then(res => {
            this.deleteShoppingCart()
            this.$store.dispatch('user/getUserInfo')
            this.$router.push({
              path: this.localePath('/order/pay'),
              query: {
                no: res.order_no
              }
            })
          })
          .catch(err => {
            this.btnLoading = false
          })
      }
    }
  }
</script>
<style lang="less" scoped>
  .common-drawer {
    left: 50%;
    width: 375px;
    transform: translateX(-50%);
    /deep/.el-drawer {
      height: 400px !important;
      border-radius: 16px 16px 0px 0px;
    }
    /deep/.el-drawer__header {
      display: none;
    }
    .common-cont {
      border-radius: 16px 16px 0px 0px;
      .title {
        padding: 0 16px;
        height: 52px;
        .name {
          font-weight: 500;
          font-size: 16px;
          color: @font-color-14;
        }
        .num {
          margin-right: 10px;
          font-size: 12px;
          color: @font-color-99;
        }
        .icon {
          width: 20px;
          height: 20px;
        }
      }
      .list {
        box-sizing: border-box;
        padding: 0 16px;
        padding-bottom: 48px;
        width: 100%;
      }
    }
  }
  .ddd {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
  }
  .pay-drawer {
    .common-cont {
      .list {
        .item {
          box-sizing: border-box;
          width: 100%;
          padding: 12px 10px;
          margin-top: 12px;
          background: @color-f7;
          border-radius: 8px;
          cursor: pointer;
          border: @border-1-f7;
          .left {
            .img {
              width: 32px;
              height: 32px;
              border-radius: 8px;
            }
            .info {
              margin-left: 8px;
              .name {
                font-weight: 500;
                font-size: 13px;
                color: @font-color-14;
              }
              .cost {
                margin-top: 4px;
                font-size: 11px;
                color: @theme-color;
              }
              .rate {
                margin-top: 4px;
                font-size: 11px;
                color: @font-color-99;
              }
            }
          }
          .checkbox {
            .icon {
              width: 16px;
              height: 16px;
            }
          }
        }
        .item:nth-child(2n + 1) {
          margin-left: 0;
        }
        .item:hover,
        .item.active {
          background: @input-focus-bg;
          border: 1px solid @theme-color;
        }
      }
    }
  }
  .goods-drawer {
    .list {
      margin-top: 8px;
      .item {
        margin-bottom: 12px;
        .top {
          padding: 0 12px;
          height: 36px;
          background: @color-f7;
          border-radius: 12px 12px 0px 0px;
          font-weight: 500;
          font-size: 12px;
          color: @font-color-14;
          .no {
            margin-left: 4px;
            color: @theme-color;
          }
        }
        .goods-info {
          padding: 0 12px;
          height: 68px;
          background: @color-ff;
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
          border-radius: 0px 0px 12px 12px;
          .goods-left {
            .img {
              width: 44px;
              height: 44px;
              margin-right: 10px;
              border-radius: 8px;
            }
            .left-info {
              margin-left: 10px;
              .name {
                width: 180px;
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
              .type {
                width: 180px;
                font-weight: 400;
                font-size: 10px;
                color: @font-color-99;
              }
            }
          }
          .goods-right {
            text-align: right;
            .price {
              font-family: HelveticaNeue, HelveticaNeue;
              font-weight: 500;
              font-size: 14px;
              color: @theme-color;
            }
            .num {
              height: 20px;
              line-height: 20px;
              font-weight: 500;
              font-size: 12px;
              color: @font-color-99;
            }
            .icon {
              width: 24px;
              height: 24px;
              margin-left: 8px;
            }
          }
        }
      }
      .item:last-child {
        margin-bottom: 0;
      }
    }
  }
  .order-pay-page {
    .box-center {
      margin-top: 20px;
      .mode {
        box-sizing: border-box;
        // width: 745px;
        padding: 20px 24px 11px 24px;
        .title {
          padding-bottom: 8px;
          border-bottom: @border-1-e5;
          .text {
            font-weight: 500;
            font-size: 22px;
            color: @font-color-14;
          }
        }
      }
      .left {
        box-sizing: border-box;
        // width: 745px;
        border-radius: 16px;
        .goods {
          padding: 24px 20px;
          margin-top: 8px;
          .title {
            font-weight: 500;
            font-size: 14px;
            color: @font-color-66;
          }
          .list {
            margin-top: 16px;
            background: @color-ff;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
            border-radius: 8px;
            .goods-row {
              border-radius: 8px 8px 0 0;
              .item-col {
                width: 110px;
                font-weight: 500;
                font-size: 14px;
                color: @font-color-99;
                text-align: center;
              }
              .base-col {
                box-sizing: border-box;
                width: 283px;
                text-align: left;
                padding-left: 24px;
              }
              .no-col {
                width: 180px;
                cursor: pointer;
              }
            }
            .row-header {
              height: 50px;
              background: @color-f7;
            }
            .row-body {
              height: 80px;
              .base-col {
                padding: 0 20px;
                .img {
                  width: 56px;
                  height: 56px;
                  border-radius: 7px;
                  cursor: pointer;
                }
                .info {
                  margin-left: 12px;
                  .name {
                    width: 170px;
                    font-weight: 500;
                    font-size: 14px;
                    color: @font-color-26;
                  }
                  .desc {
                    width: 170px;
                    margin-top: 4px;
                    font-size: 12px;
                    color: @font-color-66;
                  }
                }
              }
              .no-col {
                font-family: HelveticaNeue, HelveticaNeue;
                font-weight: 500;
                font-size: 12px;
                color: @theme-color;
              }
              .price-col {
                .price {
                  font-family: HelveticaNeue, HelveticaNeue;
                  font-weight: 500;
                  font-size: 14px;
                  color: @font-color-26;
                }
                .num {
                  font-family: HelveticaNeue, HelveticaNeue;
                  font-weight: 500;
                  font-size: 14px;
                  color: @font-color-26;
                }
              }
              .total-col {
                font-weight: 500;
                font-size: 14px;
                color: @theme-color;
              }
            }
          }
          .cards {
            display: none;
          }
        }
        .pay {
          padding: 20px 24px;
          .title {
            font-weight: 500;
            font-size: 14px;
            color: @font-color-66;
          }
          .list {
            margin-top: 0px;
            .item {
              box-sizing: border-box;
              padding: 0 20px;
              margin-left: 20px;
              margin-top: 20px;
              width: 338px;
              height: 96px;
              background: @color-f7;
              border-radius: 16px;
              cursor: pointer;
              border: @border-1-f7;
              .left {
                .img {
                  width: 96px;
                  height: 32px;
                  .icon {
                    padding: 1px 6px;
                    width: 100%;
                    height: 100%;
                    overflow: clip;
                    box-sizing: border-box;
                    object-fit: contain;
                    aspect-ratio: 1 / 1;
                  }
                }
                .info {
                  margin-left: 12px;
                  .name {
                    font-weight: 500;
                    font-size: 16px;
                    color: @font-color-14;
                  }
                  .cost {
                    margin-top: 2px;
                    font-weight: 500;
                    font-size: 12px;
                    color: @theme-color;
                  }
                  .rate {
                    font-weight: 500;
                    margin-top: 2px;
                    font-size: 12px;
                    color: @font-color-99;
                  }
                }
              }
              .checkbox {
                .icon {
                  width: 16px;
                  height: 16px;
                }
              }
            }
            .item:nth-child(2n + 1) {
              margin-left: 0;
            }
            .item:hover,
            .item.active {
              background: @input-focus-bg;
              border: 1px solid @theme-color;
            }
          }
        }
      }
      .right {
        box-sizing: border-box;
        // width: 435px;
        margin-left: 20px;
        .mode {
          width: auto;
          padding: 0 24px;
          .title {
            padding-top: 20px;
          }
          .content {
            padding: 0 8px;
          }
        }
        .pay {
          background: @color-ff;
          .title {
            margin-bottom: 20px;
          }
          .pay-status {
            margin-top: 28px;
            height: 40px;
            .text {
              font-weight: 600;
              font-size: 24px;
            }
            .text-success {
              color: #52c41a;
            }
            .text-close {
              color: #cccccc;
            }
            .text-wait {
              font-family: HelveticaNeue, HelveticaNeue;
              font-weight: bold;
              font-size: 32px;
              color: @theme-color;
            }
            .icon {
              width: 40px;
              height: 40px;
            }
          }
          .pay-item {
            margin-top: 20px;
            .label {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-66;
            }
            .cont {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-26;
            }
            .icon {
              width: 20px;
              height: 20px;
              margin-right: 8px;
            }
            .pay-price {
              font-family: Helvetica, Helvetica;
              font-weight: bold;
              font-size: 24px;
              color: @theme-color;
            }
          }
          .pay-service {
            padding: 0;
            height: 40px;
            margin-top: 8px;
            margin-bottom: 8px;
            .lable {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-66;
            }
            .price {
              text-align: right;
              font-weight: 500;
              font-size: 14px;
              color: @font-color-26;
            }
            .rate {
              text-align: right;
              font-weight: 500;
              font-size: 12px;
              color: @font-color-99;
            }
          }
          .pay-item:first-child {
            margin-top: 16px;
          }
          .line {
            margin: 0 auto;
            margin-top: 20px;
            width: 371px;
            height: 2px;
            background: @color-f0;
          }
          .handle {
            margin-top: 42px;
            .price {
              font-family: Helvetica, Helvetica;
              font-weight: bold;
              font-size: 24px;
              color: @theme-color;
            }
            .theme-btn {
              width: 233px;
              height: 50px;
              line-height: 50px;
            }
          }
          .pay-notice {
            text-align: center;
            margin-top: 8px;
            font-weight: 500;
            font-size: 12px;
            color: @font-color-99;
            .red {
              color: @theme-color;
              cursor: pointer;
            }
          }
        }
        .curpay {
          display: none;
        }
      }
    }
    .bottom-box {
      display: none;
    }
  }
  @media only screen and (min-width: 1200px) {
    .pay-drawer {
      display: none;
    }
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .order-pay-page {
      .box-center {
        margin-top: 0px;
        display: block;
        .mode {
          box-sizing: border-box;
          width: 100%;
          padding: 16px 16px 8px 16px;
          .title {
            padding-bottom: 8px;
            border-bottom: @border-1-e5;
            .text {
              font-weight: 500;
              font-size: 20px;
              color: @font-color-14;
            }
          }
        }
        .left {
          box-sizing: border-box;
          width: 100%;
          border-radius: 16px;
          .goods {
            padding: 0 16px;
            margin-top: 8px;
            .title {
              display: none;
            }
            .list {
              display: none;
            }
            .cards {
              display: block;
              .cards-item {
                margin-bottom: 12px;
                .top {
                  padding: 0 12px;
                  height: 36px;
                  background: @color-f7;
                  border-radius: 12px 12px 0px 0px;
                  font-weight: 500;
                  font-size: 12px;
                  // color: @font-color-14;
                  color: @font-color-99;
                  .no {
                    color: @theme-color;
                  }
                }
                .goods-info {
                  padding: 0 12px;
                  height: 68px;
                  background: @color-ff;
                  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
                  border-radius: 0px 0px 12px 12px;
                  .goods-left {
                    .img {
                      width: 44px;
                      height: 44px;
                      margin-right: 10px;
                      border-radius: 8px;
                    }
                    .left-info {
                      margin-left: 10px;
                      .name {
                        width: 180px;
                        font-weight: 500;
                        font-size: 12px;
                        color: @font-color-14;
                      }
                      .type {
                        width: 180px;
                        font-weight: 400;
                        font-size: 10px;
                        color: @font-color-99;
                      }
                    }
                  }
                  .goods-right {
                    text-align: right;
                    .price {
                      font-family: HelveticaNeue, HelveticaNeue;
                      font-weight: 500;
                      font-size: 14px;
                      color: @theme-color;
                    }
                    .num {
                      height: 20px;
                      line-height: 20px;
                      font-weight: 500;
                      font-size: 12px;
                      color: @font-color-99;
                    }
                    .icon {
                      width: 24px;
                      height: 24px;
                      margin-left: 8px;
                    }
                  }
                }
              }
              .cards-item:last-child {
                margin-bottom: 0;
              }
            }
          }
          .pay {
            display: none;
            padding: 20px 24px;
            .title {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-66;
            }
            .list {
              margin-top: 16px;
              .item {
                box-sizing: border-box;
                padding: 0 20px;
                margin-left: 20px;
                margin-top: 20px;
                width: 338px;
                height: 96px;
                background: @color-f7;
                border-radius: 16px;
                cursor: pointer;
                border: @border-1-f7;
                .left {
                  .img {
                    width: 42px;
                    height: 42px;
                    border-radius: 8px;
                  }
                  .info {
                    margin-left: 12px;
                    .name {
                      font-weight: 500;
                      font-size: 16px;
                      color: @font-color-14;
                    }
                    .cost {
                      margin-top: 2px;
                      font-weight: 500;
                      font-size: 12px;
                      color: @theme-color;
                    }
                  }
                }
                .checkbox {
                  .icon {
                    width: 16px;
                    height: 16px;
                  }
                }
              }
              .item:nth-child(2n + 1) {
                margin-left: 0;
              }
              .item:hover,
              .item.active {
                background: @input-focus-bg;
                border: 1px solid @theme-color;
              }
            }
          }
        }
        .right {
          box-sizing: border-box;
          width: 100%;
          margin-left: 0px;
          padding: 0px 16px;
          padding-bottom: 32px;
          .mode {
            box-sizing: border-box;
            margin-top: 16px;
            width: 100%;
            padding: 0;
            background: @color-ff;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
            border-radius: 12px;
            overflow: hidden;
            .title {
              padding: 10px 12px;
              background: @color-f7;
              border-radius: 12px 12px 0px 0px;
              border-bottom: none;
              .text {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
            }
            .content {
              padding: 16px 12px;
            }
          }
          .pay {
            .title {
              margin-bottom: 20px;
            }
            .pay-status {
              margin-top: 0px;
              height: 33px;
              .text {
                font-weight: 600;
                font-size: 24px;
              }
              .text-success {
                color: #52c41a;
              }
              .text-close {
                color: #cccccc;
              }
              .text-wait {
                font-family: HelveticaNeue, HelveticaNeue;
                font-weight: bold;
                font-size: 32px;
                color: @theme-color;
              }
              .icon {
                width: 32px;
                height: 32px;
              }
            }
            .pay-item {
              margin-top: 16px;
              .label {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
              .cont {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
              .icon {
                width: 20px;
                height: 20px;
                margin-right: 8px;
              }
              .pay-price {
                font-family: Helvetica, Helvetica;
                font-weight: bold;
                font-size: 24px;
                color: @theme-color;
              }
            }
            .pay-item:first-child {
              margin-top: 0px;
            }
            .pay-service {
              display: none;
            }
            .pay-type {
              display: none;
            }
            .line {
              margin-top: 16px;
              width: 100%;
              height: 1px;
              background: @color-f0;
            }
            .handle {
              display: none;
            }
            .pay-notice {
              display: none;
            }
          }
          .curpay {
            display: block;
            .service {
              padding: 0 16px;
              height: 40px;
              margin-top: 8px;
              margin-bottom: 8px;
              .lable {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
              .price {
                text-align: right;
                margin-right: 4px;
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
              .rate {
                text-align: right;
                margin-top: 4px;
                font-weight: 400;
                font-size: 10px;
                color: @font-color-99;
              }
            }
            .content {
              .cur-left {
                .img {
                  width: 24px;
                  height: 24px;
                }
                .name {
                  margin-left: 8px;
                  font-weight: 500;
                  font-size: 12px;
                  color: @font-color-14;
                }
              }
              .icon {
                width: 24px;
                height: 24px;
              }
            }
          }
        }
      }
      .bottom-box {
        display: block;
        position: fixed;
        left: 50%;
        bottom: 0;
        width: 375px;
        height: 90px;
        transform: translateX(-50%);
        background: @color-ff;
        z-index: 55;
        box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
        .handle {
          padding: 0 16px;
          margin-top: 10px;
          .price {
            font-family: HelveticaNeue, HelveticaNeue;
            font-weight: 500;
            font-size: 20px;
            color: @theme-color;
          }
          .theme-btn {
            padding: 0 34px;
            width: auto;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
          }
        }
        .pay-notice {
          padding: 0 16px;
          text-align: center;
          margin-top: 8px;
          font-weight: 500;
          font-size: 10px;
          color: @font-color-99;
          .red {
            color: @theme-color;
          }
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .order-pay-page {
      .box-center {
        margin-top: 0px;
        display: block;
        .mode {
          box-sizing: border-box;
          width: 100%;
          padding: 16px 16px 8px 16px;
          .title {
            padding-bottom: 8px;
            border-bottom: @border-1-e5;
            .text {
              font-weight: 500;
              font-size: 20px;
              color: @font-color-14;
            }
          }
        }
        .left {
          box-sizing: border-box;
          width: 100%;
          border-radius: 16px;
          .goods {
            padding: 0 16px;
            margin-top: 8px;
            .title {
              display: none;
            }
            .list {
              display: none;
            }
            .cards {
              display: block;
              .cards-item {
                margin-bottom: 12px;
                .top {
                  padding: 0 12px;
                  height: 36px;
                  background: @color-f7;
                  border-radius: 12px 12px 0px 0px;
                  font-weight: 500;
                  font-size: 12px;
                  // color: @font-color-14;
                  color: @font-color-99;
                  .no {
                    color: @theme-color;
                  }
                }
                .goods-info {
                  padding: 0 12px;
                  height: 68px;
                  background: @color-ff;
                  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
                  border-radius: 0px 0px 12px 12px;
                  .goods-left {
                    .img {
                      width: 44px;
                      height: 44px;
                      margin-right: 10px;
                      border-radius: 8px;
                    }
                    .left-info {
                      margin-left: 10px;
                      .name {
                        width: 180px;
                        font-weight: 500;
                        font-size: 12px;
                        color: @font-color-14;
                      }
                      .type {
                        width: 180px;
                        font-weight: 400;
                        font-size: 10px;
                        color: @font-color-99;
                      }
                    }
                  }
                  .goods-right {
                    text-align: right;
                    .price {
                      font-family: HelveticaNeue, HelveticaNeue;
                      font-weight: 500;
                      font-size: 14px;
                      color: @theme-color;
                    }
                    .num {
                      height: 20px;
                      line-height: 20px;
                      font-weight: 500;
                      font-size: 12px;
                      color: @font-color-99;
                    }
                    .icon {
                      width: 24px;
                      height: 24px;
                      margin-left: 8px;
                    }
                  }
                }
              }
              .cards-item:last-child {
                margin-bottom: 0;
              }
            }
          }
          .pay {
            display: none;
            padding: 20px 24px;
            .title {
              font-weight: 500;
              font-size: 14px;
              color: @font-color-66;
            }
            .list {
              margin-top: 16px;
              .item {
                box-sizing: border-box;
                padding: 0 20px;
                margin-left: 20px;
                margin-top: 20px;
                width: 338px;
                height: 96px;
                background: @color-f7;
                border-radius: 16px;
                cursor: pointer;
                border: @border-1-f7;
                .left {
                  .img {
                    width: 42px;
                    height: 42px;
                    border-radius: 8px;
                  }
                  .info {
                    margin-left: 12px;
                    .name {
                      font-weight: 500;
                      font-size: 16px;
                      color: @font-color-14;
                    }
                    .cost {
                      margin-top: 2px;
                      font-weight: 500;
                      font-size: 12px;
                      color: @theme-color;
                    }
                  }
                }
                .checkbox {
                  .icon {
                    width: 16px;
                    height: 16px;
                  }
                }
              }
              .item:nth-child(2n + 1) {
                margin-left: 0;
              }
              .item:hover,
              .item.active {
                background: @input-focus-bg;
                border: 1px solid @theme-color;
              }
            }
          }
        }
        .right {
          box-sizing: border-box;
          width: 100%;
          margin-left: 0px;
          padding: 0px 16px;
          padding-bottom: 32px;
          .mode {
            box-sizing: border-box;
            margin-top: 16px;
            width: 100%;
            padding: 0;
            background: @color-ff;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03);
            border-radius: 12px;
            overflow: hidden;
            .title {
              padding: 10px 12px;
              background: @color-f7;
              border-radius: 12px 12px 0px 0px;
              border-bottom: none;
              .text {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
            }
            .content {
              padding: 16px 12px;
            }
          }
          .pay {
            .title {
              margin-bottom: 20px;
            }
            .pay-status {
              margin-top: 0px;
              height: 33px;
              .text {
                font-weight: 600;
                font-size: 24px;
              }
              .text-success {
                color: #52c41a;
              }
              .text-close {
                color: #cccccc;
              }
              .text-wait {
                font-family: HelveticaNeue, HelveticaNeue;
                font-weight: bold;
                font-size: 32px;
                color: @theme-color;
              }
              .icon {
                width: 32px;
                height: 32px;
              }
            }
            .pay-item {
              margin-top: 16px;
              .label {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
              .cont {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
              .icon {
                width: 20px;
                height: 20px;
                margin-right: 8px;
              }
              .pay-price {
                font-family: Helvetica, Helvetica;
                font-weight: bold;
                font-size: 24px;
                color: @theme-color;
              }
            }
            .pay-item:first-child {
              margin-top: 0px;
            }
            .pay-service {
              display: none;
            }
            .pay-type {
              display: none;
            }
            .line {
              margin-top: 16px;
              width: 100%;
              height: 1px;
              background: @color-f0;
            }
            .handle {
              display: none;
            }
            .pay-notice {
              display: none;
            }
          }
          .curpay {
            display: block;
            .service {
              padding: 0 16px;
              height: 40px;
              margin-top: 8px;
              margin-bottom: 8px;
              .lable {
                font-weight: 500;
                font-size: 12px;
                color: @font-color-99;
              }
              .price {
                text-align: right;
                margin-right: 4px;
                font-weight: 500;
                font-size: 12px;
                color: @font-color-14;
              }
              .rate {
                text-align: right;
                margin-top: 4px;
                font-weight: 400;
                font-size: 10px;
                color: @font-color-99;
              }
            }
            .content {
              .cur-left {
                .img {
                  width: 24px;
                  height: 24px;
                }
                .name {
                  margin-left: 8px;
                  font-weight: 500;
                  font-size: 12px;
                  color: @font-color-14;
                }
              }
              .icon {
                width: 24px;
                height: 24px;
              }
            }
          }
        }
      }
      .bottom-box {
        display: block;
        position: fixed;
        left: 50%;
        bottom: 0;
        width: 375px;
        height: 90px;
        transform: translateX(-50%);
        background: @color-ff;
        z-index: 55;
        box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
        .handle {
          padding: 0 16px;
          margin-top: 10px;
          .price {
            font-family: HelveticaNeue, HelveticaNeue;
            font-weight: 500;
            font-size: 20px;
            color: @theme-color;
          }
          .theme-btn {
            padding: 0 34px;
            width: auto;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
          }
        }
        .pay-notice {
          padding: 0 16px;
          text-align: center;
          margin-top: 8px;
          font-weight: 500;
          font-size: 10px;
          color: @font-color-99;
          .red {
            color: @theme-color;
          }
        }
      }
    }
  }
</style>
